// import { Card, Col} from 'antd';
import React, { useState, useRef, } from 'react';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { Modal, Button, Form, Input, Switch } from 'antd';
import { connect } from 'umi';
// import styles from "./index.less";
import { Settings, TableListParams } from './data.d';
import request from 'umi-request';
import { PageContainer } from '@ant-design/pro-layout';
interface RequestData {
  data: Array<Settings>;
  success: boolean;
  total: number;
}
const settingHandle = async (params?: Settings): Promise<RequestData> => {
  const msg = await request<{
    data: [],
    total: number,
    success: boolean
    ;
  }>('/acs/api/updateSetting', {method: 'POST',
  data: {
    ...params,
  }});
  return {
    data: msg.data,
    total: msg.total,
    success: msg.success
  }
}
const Configuration: React.FC<{}> = (props: any) => {
  const actionRef = useRef<ActionType>();
  const [loading, setLoading] = useState<boolean>(false)//核验loading
  const [visible, setVisible] = useState<boolean>(false)//核验对话框Settings
  const [settings, setSettings] = useState<Settings>({})//设置项
  const [form] = Form.useForm();
  const showModal = () => {
    setVisible(true)
  };
  const handleOk =async () => {
    const { validateFields } = form;
    const values = await validateFields();
    let setting ={
        id:settings.id,
        num:values.num,
        status:values.status?1:2
    }
   let data = await settingHandle(setting)
   console.log(data)
    setLoading(true)
    setTimeout(() => {
      setVisible(false)
      setLoading(false)
      actionRef.current && actionRef.current.reload();
    }, 1000);
  };
  const handleCancel = () => {
    setVisible(false)
  };
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };
  const columns: ProColumns<Settings>[] = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      hideInSearch: true,
    }
    ,
    {
      title: '是否开启',
      dataIndex: 'status',
      initialValue: 'all',
      hideInSearch: true,
      key: 'status',
      // ellipsis: true,
      // filters: true,
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        1: { text: '已开启', status: 'Success' },
        2: { text: '已关闭', status: 'Error' },
      },
    },
    {
      title: '人数',
      dataIndex: 'num',
      key: 'num',
      hideInSearch: true,
    }
    ,
    {
      title: '处理时间',
      dataIndex: 'updateDate',
      key: 'updateDate',
      valueType: 'dateTime',
      width: 150,
    }
    , {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record: Settings) => (
        <>
          <a onClick={() => {
            setSettings({id:record.id,num:record.num,status:record.status===1?true:false})
            showModal()
          }}
          >
            设置
          </a>
        </>
      ),
    },
  ];

  const valueEnum = {
    0: 'close',
    1: 'running',
    2: 'online',
    3: 'error',
  };
  interface TableListItem {
    key: number;
    name: string;
    status: string;
    updatedAt: number;
    createdAt: number;
    progress: number;
    money: number;
    percent: number | string;
    createdAtRange: number[];
    code: string;
  }
  const tableListDataSource: TableListItem[] = [];
  for (let i = 0; i < 2; i += 1) {
    tableListDataSource.push({
      key: i,
      name: `TradeCode ${i}`,
      status: valueEnum[Math.floor(Math.random() * 10) % 4],
      updatedAt: Date.now() - Math.floor(Math.random() * 1000),
      createdAt: Date.now() - Math.floor(Math.random() * 2000),
      createdAtRange: [
        Date.now() - Math.floor(Math.random() * 2000),
        Date.now() - Math.floor(Math.random() * 2000),
      ],
      money: Math.floor(Math.random() * 2000) * i,
      progress: Math.ceil(Math.random() * 100) + 1,
      percent:
        Math.random() > 0.5
          ? ((i + 1) * 10 + Math.random()).toFixed(3)
          : -((i + 1) * 10 + Math.random()).toFixed(2),
      code: `const getData = async params => {
    const data = await getData(params);
    return { list: data.data, ...data };
  };`,
    });
  }
  const fetchData = async (params?: TableListParams): Promise<RequestData> => {
    const msg = await request<{
      data: [],
      total: number,
      success: boolean
      ;
    }>('/acs/api/settingAppointment', {
      params,
    });
    return {
      data: msg.data,
      total: msg.total,
      success: msg.success
    }
  }
  return (
    <PageContainer style={{ padding: '0' }}>
      <ProTable<Settings>
        headerTitle="设置列表"
        actionRef={actionRef}
        rowKey="id"
        request={(params, sorter, filter) => fetchData({ ...params, sorter, filter })}
        columns={columns}
        pagination={{
          pageSize: 10,
          showSizeChanger: false,
        }}
        search={false}
      // options={false}//搜索
      />
      <div>
        <div id="components-modal-demo-button-props">
          <Modal
            visible={visible}
            // title="Title"
            onOk={handleOk}
            onCancel={handleCancel}
            footer={[
              <Button key="back" onClick={handleCancel}>
                取消
          </Button>,
              <Button key="submit" type="primary" loading={loading} onClick={() => { handleOk() }}>
                提交
          </Button>,
            ]}
          >
            <Form
              name="validate_other"
              {...formItemLayout}
              form={form}
              initialValues={settings}
            >
              <Form.Item label="访客预约">
                <span className="ant-form-text">设置</span>
              </Form.Item>
              <Form.Item name="status" label="是否开启" valuePropName="checked">
                <Switch />
              </Form.Item>
              <Form.Item label="人数">
                <Form.Item name="num">
                  <Input />
                </Form.Item>
              </Form.Item>
            </Form>
          </Modal>
        </div>
      </div>
    </PageContainer>
  );
};

export default connect()(Configuration);